<template>
  <div>{{ currentUnit }}</div>
  <div class="unit-container" v-if="currentUnit && changeToUnit">
    <!-- 旋转背景 -->
    <div class="unit-bg unit-bg-animation-rotate">
      <img src="./images/unit-bg.png" class="unit-bg-image unit-bg-image-animation-scale" />
    </div>

    <!-- 筒条状 -->
    <!-- 固定层 -->
    <div class="unit-bar-container unit-bar-all-animation-scale" ref="unitBarContainer">
      <!-- 抖动层 -->
      <div class="shake-container" ref="shakeContainer">
        <!-- 旋转层 -->
        <img src="./images/unit-bar.png" class="unit-bar" ref="unitBar" />
      </div>

      <img src="./images/unit-bar-all.png" class="unit-bar-all" ref="unitBarAll" />
    </div>

    <!-- 波纹 -->
    <div class="unit-wave-container unit-wave-container-animation">
      <div class="unit-wave wave-animation">
        <Wave v-if="isShowWave" />
      </div>
    </div>

    <!-- 筒列表 -->
    <div class="unit-box">
      <div class="unit-list">
        <div class="unit1 unit1-animation">{{ unitChangeList[0] }}</div>
        <div class="unit2 unit2-animation">{{ unitChangeList[1] }}</div>
        <div class="unit3 opacity0 unit3-animation">{{ unitChangeList[2] }}</div>
        <div class="unit4 opacity0 unit4-animation">{{ unitChangeList[3] }}</div>
      </div>
      <div class="unit unit-transition unit-annimation">筒</div>
    </div>
    <div class="real-unit real-unit-color-animation">
      <div class="unit4">{{ unitMap[currentUnit] }}</div>
      <div class="unit">筒</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, useTemplateRef, watch } from 'vue'
import Wave from './wave.vue'
import { nextTick } from 'vue'

const props = defineProps({
  currentUnit: {
    type: String,
    default: '',
  },
})

defineExpose({
  changeUnit,
})

// 当前筒
const currentUnit = ref('')

// 切成哪个筒
const changeToUnit = ref('')

watch(
  () => props.currentUnit,
  (newValue) => {
    if (!currentUnit.value) {
      currentUnit.value = newValue
      changeToUnit.value = newValue
      nextTick(() => {
        console.log('unitBar', unitBar.value)
        if (unitBar.value) {
          const rotateMap = {
            DOWN: 'rotate(0deg)',
            LEFT: 'rotate(90deg)',
            RIGHT: 'rotate(270deg)',
            UP: 'rotate(180deg)'
          }
          const rotate = rotateMap[newValue]
          // 让bar对其到对应位置
          unitBar.value.style.transform = rotate
          unitBarAll.value.style.transform = rotate
          setTimeout(() => {
            console.log('开始旋转4', newValue)
            // 旋转bar
            rotateUnitBar(newValue, newValue)
          }, 50)
        }
      })
    } else {
      changeUnit(newValue)
    }
  },
  {
    immediate: true,
  },
)

const isShowWave = ref(true)

// 筒改变列表
const units = ref({
  UP: ['UP', 'RIGHT', 'LEFT', 'DOWN'],
  DOWN: ['DOWN', 'UP', 'RIGHT', 'LEFT'],
  LEFT: ['LEFT', 'DOWN', 'UP', 'RIGHT'],
  RIGHT: ['RIGHT', 'LEFT', 'DOWN', 'UP'],
})

// 筒改变列表-中文
const unitChangeList = computed(() => {
  if (!currentUnit.value || !changeToUnit.value) {
    return []
  }
  return units.value[changeToUnit.value].map((unit) => unitMap[unit])
})

const unitMap = {
  LEFT: '左',
  RIGHT: '右',
  DOWN: '下',
  UP: '上',
}

// 当前筒
const unitBar = useTemplateRef('unitBar')
// 筒
const unitBarAll = useTemplateRef('unitBarAll')
// 筒容器
const unitBarContainer = useTemplateRef('unitBarContainer')
// 抖动部分
const shakeContainer = useTemplateRef('shakeContainer')

/**
 * 旋转 unitBar
 * @param {number} from
 * @param {number} to
 */
function rotateUnitBar(from, to) {
  // 先移除抖动
  if (shakeContainer.value) {
    shakeContainer.value.classList.remove('shake-animation')
  }
  let barRotated = 0
  if (unitBar.value.style.transform) {
    // 已经旋转的度数
    barRotated = parseInt(unitBar.value.style.transform.split('rotate(')[1].split('deg')[0])
  }

  // 旋转角度
  const rotationAngle = barRotated + getRotationAngle(from, to)
  // 旋转
  unitBar.value.style.transform = `rotate(${rotationAngle}deg)`
  unitBarAll.value.style.transform = `rotate(${rotationAngle}deg)`
  // 2240ms后开始抖动
  setTimeout(() => {
    shakeContainer.value.classList.add('shake-animation')
  }, 2240)
}

// 获取旋转角度
function getRotationAngle(from, to) {
  const directionMap = {
    "UP-DOWN": 540,
    "DOWN-UP": 540,
    "LEFT-UP": 450,
    "RIGHT-UP": 630,
    "UP-LEFT": 630,
    "DOWN-LEFT": 450,
    "LEFT-DOWN": 630,
    "RIGHT-DOWN": 450,
    "UP-RIGHT": 450,
    "DOWN-RIGHT": 630,
    "LEFT-RIGHT": 540,
    "RIGHT-RIGHT": 540
  };
  const key = `${from}-${to}`;
  return directionMap[key] ?? 360;
}

function setUnitName(to) {
  console.log('切筒', currentUnit.value, to)
  if (to) {
    changeToUnit.value = to
    // 稍微有个延时变化
    setTimeout(() => {
      currentUnit.value = to
    }, 100)
  }
}

let timer = null
// 关闭波纹
function closeWave() {
  // 动画时长2880，不关闭会导致波纹不一致
  if (timer || timer > 0) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    isShowWave.value = false
    timer = null
  }, 3040)
}

/**
 * 切筒
 * @param changeTo 切换到
 */
function changeUnit(changeTo) {
  rotateUnitBar(currentUnit.value, changeTo)
  const unitBgDom = document.querySelector('.unit-bg')
  const unitBgImageDom = document.querySelector('.unit-bg-image')
  const waveDom = document.querySelector('.unit-wave')
  const unit1Dom = document.querySelector('.unit1')
  const unit2Dom = document.querySelector('.unit2')
  const unit3Dom = document.querySelector('.unit3')
  const unit4Dom = document.querySelector('.unit4')
  const unitTransitionDom = document.querySelector('.unit-transition')
  const realUnitDom = document.querySelector('.real-unit')
  const unitWaveContainerDom = document.querySelector('.unit-wave-container')

  if (
    !unitBgDom ||
    !unitBgImageDom ||
    !waveDom ||
    !unit1Dom ||
    !unit2Dom ||
    !unit3Dom ||
    !unit4Dom ||
    !unitTransitionDom ||
    !realUnitDom ||
    !unitWaveContainerDom ||
    !unitBarContainer.value
  ) {
    return
  }

  waveDom.classList.remove('wave-animation')
  unitBgDom.classList.remove('unit-bg-animation-rotate')
  unitBgImageDom.classList.remove('unit-bg-image-animation-scale')
  unit1Dom.classList.remove('unit1-animation')
  unit2Dom.classList.remove('unit2-animation')
  unit3Dom.classList.remove('unit3-animation')
  unit4Dom.classList.remove('unit4-animation')
  realUnitDom.classList.remove('real-unit-color-animation')
  unitTransitionDom.classList.remove('unit-annimation')
  unitWaveContainerDom.classList.remove('unit-wave-container-animation')
  unitBarContainer.value.classList.remove('unit-bar-all-animation-scale')
  isShowWave.value = true
  setTimeout(() => {
    unitBgDom.classList.add('unit-bg-animation-rotate')
    unitBgImageDom.classList.add('unit-bg-image-animation-scale')
    waveDom.classList.add('wave-animation')
    unit1Dom.classList.add('unit1-animation')
    unit2Dom.classList.add('unit2-animation')
    unit3Dom.classList.add('unit3-animation')
    unit4Dom.classList.add('unit4-animation')
    realUnitDom.classList.add('real-unit-color-animation')
    unitTransitionDom.classList.add('unit-annimation')
    unitWaveContainerDom.classList.add('unit-wave-container-animation')
    unitBarContainer.value.classList.add('unit-bar-all-animation-scale')
    closeWave()
    setUnitName(changeTo)
  }, 100)
}
</script>

<style scoped lang="less">
@import './index.less';
</style>
